/** * Created by youyaping on 2017/10/12. */
<script>
  import Vue from 'vue'
  
  let platform = require('platform')
  let isLinux = /linux/i.test(platform.os)
  export default {
    name: 'ContextMenu',
    data() {
      return {
        show: false
      }
    },
    props: {
      trigger: {
        type: String,
        default: 'contextmenu'
      },
      hoverColor: {
        type: String,
        default: '#20a0ff'
      },
      hideOnSelect: {
        type: Boolean,
        default: true
      }
    },
    provide() {
      return {
        rootMenu: this
      }
    },
    watch: {
      show(show) {
        if (show) {
          this.$refs['context-menu-content'].style.display = 'block'
        } else {
          this.$refs['context-menu-content'].style.display = 'none'
        }
      }
    },
    beforeCreate() {
      // let that = this
      // this.popperVM = new Vue({
      //   data: {node: ''},
      //   provide() {
      //     return {
      //       'rootMenu': that
      //     }
      //   },
      //   render(h) {
      //     return this.node
      //   }
      // }).$mount()
      // document.body.appendChild(this.popperVM.$el)
    },
    render(h) {
      return h('div', {
        attrs: {
          id: 'multi-menu'
        },
        ref: 'context-menu-content'
      }, [h('ul', {}, [this.$slots.default])])
      // if (!this.$slots.default || !this.$slots.default.length) return this.$slots.default
      // this.targetVNode = this.getFirstComponentChild(this.$slots.default)
      // return this.targetVNode
    },
    mounted() {
      // this.target = this.targetVNode.elm
      this.bindHideEvents()
      // this.bindContextMenuEvent()
    },
    unmounted() {
      // this.unbindContextMenuEvent()
      this.unbindHideEvents()
    },
    beforeDestroy() {
    },
    methods: {
      addEventHandle(old, fn) {
        if (!old) {
          return fn
        } else if (Array.isArray(old)) {
          return old.indexOf(fn) > -1 ? old : old.concat(fn)
        } else {
          return old === fn ? old : [old, fn]
        }
      },
      concatClass(a, b) {
        if (a && a.indexOf(b) > -1) return a
        return a ? b ? (a + ' ' + b) : a : (b || '')
      },
      getFirstComponentChild(children) {
        return children && children.filter(c => c && c.tag)[0]
      },
      // bindContextMenuEvent() {
      //   this.target.addEventListener(this.trigger, this.contextMenuHandler)
      // },
      // unbindContextMenuEvent() {
      //   this.target.removeEventListener(this.trigger, this.contextMenuHandler)
      // },
      bindHideEvents() {
        document.addEventListener('mouseup', this.hideMenu)
        document.addEventListener('mousewheel', this.hideMenu)
      },
      unbindHideEvents() {
        document.removeEventListener('mouseup', this.hideMenu)
        document.removeEventListener('mousewheel', this.hideMenu)
      },
      hideMenu() {
        if (this.hideClose) {
          this.hideClose = false
          return
        }
        this.show && (this.show = false)
      },
      contextMenuHandler(e) {
        if (this.trigger === 'contextmenu' && isLinux) {
          this.hideClose = true
        }
        setTimeout(() => {
          // 获取视口大小
          let pageWidth = window.innerWidth,
            pageHeight = window.innerHeight
          if (typeof pageWidth !== 'number') {
            if (document.compactMode === 'CSS1Compat') {
              pageWidth = document.documentElement.clientWidth
              pageHeight = document.documentElement.clientHeight
            } else {
              pageWidth = document.body.clientWidth
              pageHeight = document.body.clientHeight
            }
          }
          let top = e.clientY
          // console.log(this.$slots.default)
          let filteredSlot = this.$slots.default.filter(one => one.tag)
          if (pageHeight - e.clientY < filteredSlot.length * 36) {
            top -= filteredSlot.length * 36
          }
          
          // 手动定位
          this.$refs['context-menu-content'].style.left = e.clientX + 'px'
          this.$refs['context-menu-content'].style.top = top + 'px'
          this.show = true
          e.preventDefault()
          e.stopPropagation()
        })
      },
      layout() {
        this.style = {
          left: this.x + 'px',
          top: this.y + 'px'
        }
      }
    }
  }

</script>
<style lang="scss">
  #multi-menu {
    position: fixed;
    border: 1px solid #eee;
    border-right: none;
    border-radius: 1px;
    display: none;
    z-index: 9999;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    ul {
      display: inline-block;
      vertical-align: top;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      min-width: 160px;
      li {
        list-style: none;
        font-size: 14px;
        padding: 8px 30px 8px 10px;
        background-color: #fff;
        box-sizing: border-box;
        border-right: 1px solid #eee;
        position: relative;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #1a1a1a;
        height: 36px;
        line-height: 1.5;
        box-sizing: border-box;
        cursor: pointer;
        ul {
          position: absolute;
          top: -1px;
          left: calc(100% + 1px);
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
          box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, .1);
        }
        &:hover {
          color: #fff;
        }
        i[class ^='el-icon'] {
          transform: scale(.8);
          color: #bfcbd9;
          position: absolute;
          right: 10px;
          margin-top: 5px;
          font-size: 12px;
        }
      }
    }
  }

</style>
